<template>
  <div class="container">
    <main>
      <div class="number_1 number"></div>
      <div class="number_2 number"></div>
      <div class="number_3 number"></div>
      <div class="number_4 number"></div>
      <div class="number_5 number"></div>
      <div class="number_6 number"></div>
    </main>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  }
}
</script>

<style lang="less" scoped>
  /*main*/
  main{
    position: relative;
    width: 100%;
    min-height: 400px;
    margin: auto;
    transform-style:preserve-3d;
    animation: zhuanquan 5s linear infinite;
    .number{
      height: 200px;
      width: 400px;
      position: absolute;
      top:50%;
      left: 50%;
      margin-top:-100px;
      background-size: 100%;
      transform-origin: left center;
    }
  }
  /*动画*/
  @keyframes zhuanquan{
    from{
      transform:rotateY(0deg);
    }
    to{
      transform:rotateY(360deg);
    }
  }
  /*1*/
  .number_1{
    transform:rotateY(0deg);
    background-image:url(./imgs/1.png);
  }
  /*2*/
  .number_2{
    transform:rotateY(60deg);
    background-image:url(./imgs/2.jpg);
  }
  /*3*/
  .number_3{
    transform:rotateY(120deg);
    background-image:url(./imgs/3.jpg);
  }
  .number_4{
    transform:rotateY(180deg);
    background-image:url(./imgs/4.jpg);
  }
  .number_5{
    transform:rotateY(240deg);
    background-image:url(./imgs/1.png);

  }
  .number_6{
    transform:rotateY(300deg);
    background-image:url(./imgs/6.jpg);
  }
</style>
